import React, { useState, useEffect } from 'react';
import { DatePicker } from 'antd';
import { formatMessage } from 'umi';
import moment from 'moment';
import classNames from 'classnames';
import Select from '@/zero/components/Select';
import styles from '../index.less';

const parseValue = (value = '') => {
  switch (value.length) {
    case 4:
      return { defaultType: 'year', srcFormat: 'YYYY', tarFormat: 'YYYY' };
    case 6:
      return { defaultType: 'month', srcFormat: 'YYYYMM', tarFormat: 'YYYY-MM' };
    case 8:
      return { defaultType: 'date', srcFormat: 'YYYYMMDD', tarFormat: 'YYYY-MM-DD' };
    default:
      return {
        defaultType: 'datetime',
        srcFormat: 'YYYYMMDDHHmmss',
        tarFormat: 'YYYY-MM-DD HH:mm:ss',
      };
  }
};

const Index = (props) => {
  const {
    placeholder = formatMessage({ id: '请选择' }),

    disabled,
    value,
    onChange,

    ...rest
  } = props;

  const { defaultType, srcFormat, tarFormat } = parseValue(value);

  const [type, setType] = useState(defaultType);

  useEffect(() => {
    if (defaultType) {
      setType(defaultType);
    }
  }, [defaultType]);

  const newValue = value && moment(value, srcFormat);

  if (!Object.keys(props).includes('value')) {
    return 'DEPRECATED';
  }

  if (disabled && disabled.render) {
    return (
      disabled.render(newValue?.format(tarFormat), { value, srcFormat, tarFormat }) || (
        <span>&nbsp;</span>
      )
    );
  }

  return (
    <span className={classNames(styles.col24, styles.componentWrapper)}>
      <div style={{ position: 'relative', flex: 1 }}>
        <Select
          style={{ width: 100, marginRight: 3 }}
          value={type}
          onChange={(newType) => {
            if (onChange) {
              switch (newType) {
                case 'year':
                  onChange(newValue?.format('YYYY'));
                  break;
                case 'month':
                  onChange(newValue?.format('YYYYMM'));
                  break;
                case 'date':
                  onChange(newValue?.format('YYYYMMDD'));
                  break;
                default:
                  onChange(newValue?.format('YYYYMMDDHHmmss'));
              }
            }
            setType(newType);
          }}
        >
          <Select.Option value="year">{formatMessage({ id: '年' })}</Select.Option>
          <Select.Option value="month">{formatMessage({ id: '月' })}</Select.Option>
          <Select.Option value="date">{formatMessage({ id: '日' })}</Select.Option>
          <Select.Option value="datetime">{formatMessage({ id: '时' })}</Select.Option>
        </Select>
        {type === 'year' && (
          <DatePicker
            placeholder={placeholder}
            {...rest}
            picker="year"
            format="YYYY"
            disabled={!!disabled}
            value={newValue}
            onChange={(date) => {
              if (onChange) {
                onChange(date?.format('YYYY'));
              }
            }}
          />
        )}
        {type === 'month' && (
          <DatePicker
            placeholder={placeholder}
            {...rest}
            picker="month"
            format="YYYY-MM"
            disabled={!!disabled}
            value={newValue}
            onChange={(date) => {
              if (onChange) {
                onChange(date?.format('YYYYMM'));
              }
            }}
          />
        )}
        {type === 'date' && (
          <DatePicker
            placeholder={placeholder}
            {...rest}
            showTime={false}
            format="YYYY-MM-DD"
            disabled={!!disabled}
            value={newValue}
            onChange={(date) => {
              if (onChange) {
                onChange(date?.format('YYYYMMDD'));
              }
            }}
          />
        )}
        {type === 'datetime' && (
          <DatePicker
            placeholder={placeholder}
            {...rest}
            showTime
            format="YYYY-MM-DD HH:mm:ss"
            disabled={!!disabled}
            value={newValue}
            onChange={(date) => {
              if (onChange) {
                onChange(date?.format('YYYYMMDDHHmmss'));
              }
            }}
          />
        )}
      </div>
    </span>
  );
};

Index.parseAndFormatValue = (dateString, newFormat) => {
  if (dateString) {
    const { srcFormat, tarFormat } = parseValue(dateString);
    return moment(dateString, srcFormat).format(newFormat || tarFormat);
  }
  return '';
};

Index.displayName = 'AutoPicker';
export default Index;
